<template>
    <div>
        <el-button @click="dialogVisible = true" type="info">邀请专家</el-button>
        <el-drawer v-model="dialogVisible" title="选择专家" direction="ltr" size="45%" :before-close="closeDrawer">
            <el-row :gutter="12">
                <el-col :span="5.5" v-for="(item) of doctorList" :key="item.id" style="margin: 6px 0;">
                    <el-card shadow="hover" @click="changeList(item.use_by)"
                        :class="{ changeBorder: item.use_by == useBy }">
                        <el-avatar :size="100" :src="item.photo" shape="square">
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                        </el-avatar>
                        <div style="margin-top: 10px;font-size: 12px; text-align: center;">{{ item.name }}</div>
                    </el-card>
                </el-col>
            </el-row>
            <div class="demo-drawer__footer" style="position: fixed; bottom: 5
            0px; left: 480px;">
                <el-button @click="closeDrawer">取消</el-button>
                <el-button type="primary" :loading="loading" @click="sending">{{
                    loading ? '发送中 ...' : '发出邀请'
                }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getListUser } from '@/api/system/user'

const dialogVisible = ref(false)
const loading = ref(false)
const doctorList = ref([])
const useBy = ref(true)

const sending = () => {
    ElMessageBox.confirm('确认发送邀请?', '提示').then(() => {
        loading.value = true;
        setTimeout(() => {
            loading.value = false;
            if (useBy.value == true) {
                ElMessage('请选择专家！');
                return;
            }
            ElMessage({
                message: '发送成功！',
                type: 'success'
            })
            console.log(useBy.value);
            closeDrawer();
        }, 1500)
    }).catch(() => {
        ElMessage('取消发送')
    })
}

function closeDrawer() {
    useBy.value = true;
    dialogVisible.value = false;
}

function changeList(use_by) {
    if (useBy.value == use_by) useBy.value = useBy.value; else useBy.value = use_by;
}

function bindDoctor(){
    getListUser('医生').then(res => {
        doctorList.value = res.data;
    })
}
bindDoctor();
</script>

<style scoped>
.changeBorder {
    background-color: rgb(64, 158, 255);
    opacity: 0.5;
}
</style>